<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<!-- JavaScript：核心语法+DOM（针对页面操作）+BOM（针对浏览器）
		 学习主体：针对页面操作较多 ---DOM操作
		 JQuery操作DOM：理解：JQ框架改变页面内容效果
		 js基础可以直接学习，了解函数使用
		 基础函数----事件源之后出现，事件源语法糖中
		 html()    作用：增加一个元素，覆盖原有html
		 val()     作用：针对input元素，实现修改文本框内容
		 text()    作用：生成文本内容
		 -->
		 <script src="js/jquery-1.11.1.js"></script>
		 <style>
			 div{
				 width: 200px;
				 height: 200px;
				 background: #000;
			 }
		 </style>
	</head>
	<body>
		<!-- 鼠标点击按钮，然后，下面产生一行文本 -->
		<button>按钮1</button>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis blanditiis molestiae ipsa praesentium, similique nemo sunt voluptatem a obcaecati asperiores suscipit impedit cum sequi alias perspiciatis nobis neque. Quod, quos?</p>
		
		<div></div>
		<h3>123456</h3>
		<input type="button" value="按钮2"/>
		<input type="text" value="尊尼获不尽"/>
		<script>
			$("button").click(function(){
				/*JQ操作DOM--html()函数使用*/
				$('p').html("<h1>JQ操作DOM-html函数使用</h1>");
			});
			/*练习：div 200*200 背景颜色自定，鼠标滑过之后
			下面内容修改 <h3>提示，修改为黄颜色*/
			$("div").mouseenter(function(){
				$("h3").html("<h3>654321</h3>")
			});
			/*练习： 按钮  文本框     点击按钮，文本增加一行文本*/
			$("input[type='button']").click(function(){
				$("input[type='text']").val("加加吹又生")
			});
			/*利用JQ操作DOM（页面效果）：元素内容操作（3个函数）
			                           属性操作（4个函数）
									   样式类名操作（4个函数）
									   元素样式操作（5个函数）
									   插入和删除操作（7个函数）
									   元素遍历操作（6个函数）
									   JQ动画操作（7个函数）
			*/
		</script>
	</body>
</html>